<template>

  <div style="display: flex">
    <div style="display: flex">
      <transition name="el-zoom-in-center">
        <div style="display: flex;flex-direction: column;min-width: 220px;position: relative" v-show="isShow">
          <div class="pd10" style="display: flex;justify-content: center;">
            <el-card class="box-card">
              <el-table
                height="500"
                :data="tableData"
                style="width: 100%;"
                :default-sort = "{prop: 'date', order: 'descending'}"
                show-summary
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  sortable
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="单数"
                  sortable
                  width="180">
                </el-table-column>
              </el-table>
              <pagination2 :total="total2" :pageSizes="pageSizes2" :page.sync="pageNum2" :limit.sync="pageSize2"
                           @pagination="loadStatistics"></pagination2>

            </el-card>
          </div>

        </div>
      </transition>
      <div class="leftBotton_Css" @click="leftBotton">
        <a style="width: 100%">
          <div class="left_css">
            <i :class="[isShow ?'el-icon-caret-left':'el-icon-caret-right']"></i>
          </div>
        </a>
      </div>
    </div>
  <el-container>
    <div style="padding-bottom: 0;padding-top: 10px;padding-left: 10px;padding-right: 10px">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="report_header_left"></div>
          <div style="display: flex;align-items: center;">
            <div class="report_header_query" style="margin-left: 10px;width: 300px">
              <queryDate @queryDateClick='queryDateClick'></queryDate>
            </div>
            <div class="report_header_query">
              <query-group @queryGroupClick="queryGroupClick"></query-group>
            </div>
            <div class="report_header_query" style="width: 300px">
              <queryMember @queryMemberClick="queryMemberClick" style="width: 150px"></queryMember>
              <el-checkbox v-model="allChild" style="margin-left: 10px">显示所有下级</el-checkbox>
            </div>

            <div class="report_header_query">
              <el-select v-model="query.orderStatus" clearable placeholder="请选择订单状态">
                <el-option
                  v-for="item in groupTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"  @click="isShow = true">汇总</el-button>

            <!--            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"  @click="drawer = true">汇总</el-button>-->
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"  @click="queryClick">查询</el-button>
            <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
          <!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
<!--    <el-drawer-->
<!--      direction="ltr"-->
<!--      with="500px"-->
<!--      title="我是标题"-->
<!--      :visible.sync="drawer"-->
<!--      :with-header="false">-->
<!--      <div class="pd10" style="display: flex;justify-content: center;">-->
<!--        <el-card class="box-card">-->
<!--          <el-table-->
<!--            height="550"-->
<!--            :data="tableData"-->
<!--            style="width: 100%;"-->
<!--            :default-sort = "{prop: 'date', order: 'descending'}"-->
<!--            show-summary-->
<!--          >-->
<!--            <el-table-column-->
<!--              prop="date"-->
<!--              label="日期"-->
<!--              sortable-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="quantity"-->
<!--              label="单数"-->
<!--              sortable-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--          <pagination2 :total="total2" :pageSizes="pageSizes2" :page.sync="pageNum2" :limit.sync="pageSize2"-->
<!--                       @pagination="loadStatistics"></pagination2>-->

<!--        </el-card>-->
<!--      </div>-->
<!--    </el-drawer>-->

        <div class="pd10">
          <div class="details_card" style="background-color:#f8f8f8" v-loadMore="[payLoads,'groupOrder-index']" :style="{height:curHeight+'px'}">
            <gourporder v-for="item in groupOrderForm" :key="item"  :orderData="item"  @detailsClick="detailsClick" @loadList='loadList'></gourporder>
            <!--        <gourporder v-for="item in groupOrderList" :orderData="item" @loadList='loadList'></gourporder>-->
            <!--        <order-item :orderForm="groupOrderForm" @detailsClick="detailsClick"></order-item>-->
          </div>
        </div>
        <el-footer class="el-footerBox" style="margin-bottom: auto">
          <pagination :total="total" :pageSizes="pageSizes" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="totalOrder"></pagination>
        </el-footer>

  </el-container>

  </div>

</template>

<script>
import queryMember from "@/components/Query/queryMember";
import queryGroup from "@/components/Query/queryGroup";
import Pagination from '@/components/Pagination'
import Pagination2 from '@/components/Pagination/index2.vue'
import orderItem from './components/list'
import gourporder from './components/list2'
import loadMore from '@/utils/more.js'
import {list,statistics} from '@/api/groupOrder'
import ExportList2Excel from "@/components/ExportList2Excel";
import utils from '@/utils/utils'
import queryDate from '@/components/Query/queryDate'
import CategoryPanel from './components/CategoryPanel'


import permission from "@/directive/permission";
import elDragDialog from "@/directive/el-drag-dialog";
export default {
  directives: { loadMore },
  activated() {
    this.payLoads = new Date().getTime()
  },
  name: "groupOrder-index",
  data(){
    return{
      isShow: false,
      drawer: false,
      tableData: [],
      curHeight: null,
      pageNum: 1,
      pageSize: 8,
      pageNum2: 1,
      pageSize2: 10,
      pageSizes: [8, 16, 24, 32],
      pageSizes2: [8, 16, 24, 32],
      printing: 5000,
      total: 0,
      total2:0,
      payLoads: '',
      allChild: false,
      queryType:true,
      groupOrderForm:[],
      query: {
        endDate: '',
        beginDate: '',
        memberId: '',
        groupBuyId:'',
        orderStatus:''
      },
      groupTypeData:[
        {
          value: '1',
          label: '已成交'
        },
        {
          value: '99',
          label: '已成团'
        },
        {
          value: '4',
          label: '已成团(待升级)'
        },
        {
          value: '5',
          label: '已成团(已完成)'
        },
        {
          value: '6',
          label: '已出局'
        },
      ]
    }
  },
  components:{
    Pagination,orderItem,queryMember,queryGroup,gourporder,ExportList2Excel,queryDate,Pagination2,CategoryPanel
  },
  mounted() {
    this.loadList()
    this.comeIn()
    this.beforeMount()
    this.loadStatistics()
  },
  methods:{
    leftBotton: function () {
      this.isShow = !this.isShow
    },
    // formatter(row, column) {
    //   return row.address;
    // },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 311//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    totalOrder(){
      // 分页事件
      this.loadList()
    },
    detailsClick(data) {
      this.$router.push({
        path: '/groupOrder/view', query: { id: data }
      })
    },
    loadList(){
      var _this = this
      let params = new URLSearchParams();
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('pageNum', this.pageNum);
      params.append('pageSize', this.pageSize);
      params.append('memberId',this.query.memberId);
      params.append('allChild', this.allChild);

      params.append('groupBuyId',this.query.groupBuyId);
      params.append('orderStatus',this.query.orderStatus)
      list(params).then(res=>{
        _this.groupOrderForm = res.data.data
        _this.total = res.data.total
      })
    },
    loadStatistics(){
      var _this = this
      let params = new URLSearchParams();
      params.append('pageNum', this.pageNum2);
      params.append('pageSize', this.pageSize2);
      params.append('memberId',this.query.memberId);
      params.append('groupBuyId',this.query.groupBuyId);
      statistics(params).then(res=>{
        this.tableData = res.data.statisticsList.data
        this.total2 =res.data.statisticsList.total
      })
    },

    //下载模板的函数
    handleExport() {

      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      let data = {}
      data.tHeader = ["时间", "客户信息", "团购名", "期号", "商品信息", "关系树","状态"]
      data.filterVal = ["createDate", "nickname", "groupBuyName", "periodId", "productName", "treePath","orderStatus"]
      data.filename = "团购订单";

      const params = new URLSearchParams()

      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.printing)
      params.append('memberId',this.query.memberId);
      params.append('allChild', this.allChild);
      params.append('groupBuyId',this.query.groupBuyId);
      params.append('orderStatus',this.query.orderStatus)

      list(params).then(res=>{
        res.data.data.forEach((item) => {
          item.createDate = utils.dateFormatter(item.createDate)
          var s = " 1."+item.nickname
          if (item.linkedList[0]) {
            s = s+",2."+item.linkedList[0].nickname
          }
          if (item.linkedList[1]) {
            s = s+",3."+item.linkedList[1].nickname
          }
          if (item.linkedList[2]) {
            s = s+",4."+item.linkedList[2].nickname
          }
          if (item.linkedList[3]) {
            s = s+",5."+item.linkedList[3].nickname
          }
          if (item.linkedList[4]) {
            s = s+",6."+item.linkedList[4].nickname
          }
          if (item.linkedList[5]) {
            s = s+",7."+item.linkedList[5].nickname
          }
          item.treePath = s;
          if (item.itemList.length>0) {
            item.productName = item.itemList[0].name
          } else {
            item.productName = "没下单"
          }
          if (item.orderStatus>3) {
            item.orderStatus = '已成团'
          } else {
            item.orderStatus = '未成团'
          }
        })
        console.log(res.data.data)
        data.list = res.data.data
        _this.$refs.exportList2Excel.handleDownload(data);
        loading.close();

        if (data.list.length == this.printing) {
          this.pageNum++
          this.handleExport()
        }
        else {
          return;
        }

      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
      })
    },
    queryMemberClick(data){
      this.query.memberId = data.memberId
    },
    summaryClick(){
      console.log("1111111")
    },
    detailedClick(){
      console.log("222222222")
    },
    queryClick(){
      this.pageNum=1;
   //   this.pageSize=10;
      this.loadList()
    },

    queryGroupClick(data){
      this.query.groupBuyId = data.groupId
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
  }
}
</script>

<style scoped>
.leftBotton_Css {
  min-height: calc(100vh - 84px);
  background-color: #f2f2f2;
  width: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.left_css {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #999999;
  border-radius: 2px;
}
.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}
.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.report_header_query {
  margin-left: 10px;
  width: 150px;
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  align-items: center
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.el-drawer__wrapper{
  position: absolute!important;
}
</style>




















